import React from "react"
import logo from "../../assets/logo.svg"
import styles from "./Header.module.css"
import { Layout, Typography, Input, Dropdown, Menu, Button } from "antd"
import { GlobalOutlined } from "@ant-design/icons"
import useSelector from "../../store/hooks"
import { useDispatch } from "react-redux"
import { MenuInfo } from "rc-menu/lib/interface"
import { addLanguageActionCreator, changeLanguageActionCreator } from "../../store/reducers/languageActions"

const Header: React.FC = () => {
	// const lanStore = store.getState()
	// console.log("s --> ", lanStore)

	const language = useSelector(state => state.language.language)
	const languageList = useSelector(state => state.language.languageList)
	const dispatch = useDispatch()

	const handleClick = (e: MenuInfo) => {
		console.log(e.key)
		if (e.key === "add") {
			dispatch(addLanguageActionCreator("new", "Fr"))
		} else {
			dispatch(changeLanguageActionCreator(e.key as any))
		}
	}

	return (
		<div className={styles["app-header"]}>
			<div className={styles["top-header"]}>
				<div className={styles.inner}>
					<Typography.Text>让旅游更幸福</Typography.Text>
					<Dropdown.Button
						style={{ marginLeft: 15 }}
						overlay={
							<Menu onClick={handleClick}>
								{/* <Menu.Item key="Chinese">中文</Menu.Item>
								<Menu.Item key="English">English</Menu.Item> */}
								{languageList.map(lan => (
									<Menu.Item key={lan.code}>{lan.name}</Menu.Item>
								))}
								<Menu.Item key="add">添加新语言</Menu.Item>
							</Menu>
						}
						icon={<GlobalOutlined />}
					>
						{language === "zh" ? "中文" : "English"}
					</Dropdown.Button>
					<Button.Group className={styles["button-group"]}>
						<Button>注册</Button>
						<Button>登录</Button>
					</Button.Group>
				</div>
			</div>
			<Layout.Header className={styles["main-header"]}>
				<img className={styles["App-logo"]} src={logo} alt="" />
				<Typography.Text strong>React 旅游网</Typography.Text>
				<Input.Search placeholder="请输入旅游目的地、主题、或关键字" className={styles["search-input"]}></Input.Search>
			</Layout.Header>
			<Menu mode="horizontal" className={styles["main-menu"]}>
				<Menu.Item key={1}>旅游首页</Menu.Item>
				<Menu.Item key={2}>周末游</Menu.Item>
				<Menu.Item key={3}>跟团游</Menu.Item>
				<Menu.Item key={4}>自由行</Menu.Item>
				<Menu.Item key={5}>私家团</Menu.Item>
				<Menu.Item key={6}>游轮</Menu.Item>
				<Menu.Item key={7}>酒店+景点</Menu.Item>
				<Menu.Item key={8}>当地玩乐</Menu.Item>
				<Menu.Item key={9}>主题游</Menu.Item>
				<Menu.Item key={10}>定制游</Menu.Item>
				<Menu.Item key={11}>游学</Menu.Item>
				<Menu.Item key={12}>签证</Menu.Item>
				<Menu.Item key={13}>企业游</Menu.Item>
				<Menu.Item key={14}>高端游</Menu.Item>
				<Menu.Item key={15}>爱玩户外</Menu.Item>
				<Menu.Item key={16}>保险</Menu.Item>
			</Menu>
		</div>
	)
}

export default Header
